<template>
	<custom-layout custom-class="custom-layout">
		<!-- 筛选条件 -->
		<wd-drop-menu>
			<wd-drop-menu-item v-model="pagination.houseType"
				:options="[{label:'全部户型',value:''},...dictionaryStore.get('decoration_order_house_type')]"
				@change="(value)=>handleChangeFilter('houseType',value)" />
			<wd-drop-menu-item v-model="pagination.style"
				:options="[{label:'全部风格',value:''},...dictionaryStore.get('case_style')]"
				@change="(value)=>handleChangeFilter('style',value)" />
			<wd-drop-menu-item v-model="pagination.houseArea"
				:options="[{label:'全部面积',value:''},...dictionaryStore.get('area')]"
				@change="(value)=>handleChangeFilter('houseArea',value)" />
		</wd-drop-menu>
		<!-- 案例列表 -->
		<view v-if="caseList.length" class="case-list">
			<view class="case" v-for="_ in caseList" :key="_.id" @click.self="handleJumpCaseDetails(_.id)">
				<image class="cover" :src="_.coverImage?.[0].url" mode="aspectFill" />
				<view class="info">
					<view class="property-name">{{propertyList.find(item=>item.id===_.propertyName)?.name}} | {{_.title}}</view>
					<view class="description">
						<view class="item">{{dictionaryStore.analysis('case_style',_.style)}}</view>
						<view class="item">{{dictionaryStore.analysis('decoration_order_house_type',_.houseType)}}</view>
						<view class="item">{{dictionaryStore.analysis('area',_.houseArea)}}</view>
						<view class="share"  v-if="!userStore.userId" @click.stop="handleShare">
							<wd-button size="small" custom-class="share" >转发</wd-button>
						</view>
						<view class="share"  v-if="userStore.userId" @click.stop>
							<wd-button size="small" open-type="share" custom-class="share">转发</wd-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<wd-loadmore v-if="caseList.length" :state="pagination.loadmoreState" @reload="handleGetCasePage" />
		<!-- 空 -->
		<wd-status-tip v-if="!caseList.length" image="search" tip="暂无案例" />
		<!-- 回到顶部 -->
		<wd-backtop :scrollTop="scrollTop" :top="10"></wd-backtop>
	</custom-layout>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	import {
		getCasePage,
		getPropertyList
	} from '@/api/case/index.js'

	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 楼盘列表
	const propertyList = ref([])
	// 获取楼盘列表
	const handleGetPropertyList = () => {
		const params = {
			pageSize: -1
		}
		getPropertyList(params).then((data) => {
			propertyList.value = data.list
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 分页
	const pagination = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		loadmoreState: 'loading',
		houseType: '',
		style: '',
		houseArea: ''
	})
	// 案例列表
	const caseList = ref([])
	// 处理获取案例分页
	const handleGetCasePage = () => {
		handleGetPropertyList()
		pagination.loadmoreState = 'loading'
		const params = {
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize,
			houseType: pagination.houseType,
			style: pagination.style,
			houseArea: pagination.houseArea
		}
		getCasePage(params).then((data) => {
			caseList.value.push(...data.list)
			pagination.total = data.total
			pagination.pageNo++
			if (caseList.value.length >= pagination.total) pagination.loadmoreState = 'finished'
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
			pagination.loadmoreState = 'error'
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}
	onLoad(() => {
		handleGetCasePage()
	})
	// 初始化查询
	const initQuery = () => {
		pagination.pageNo = 1
		pagination.total = 0
		caseList.value = []
		handleGetCasePage()
	}
	// 下拉刷新
	onPullDownRefresh(() => {
		initQuery()
	})
	// 触底刷新
	onReachBottom(() => {
		if (caseList.value.length < pagination.total) handleGetCasePage()
	})
	// 处理改变过滤
	const handleChangeFilter = (key, {
		selectedItem
	}) => {
		pagination[key] = selectedItem.value
		initQuery()
	}
	// 处理跳转详情
	const handleJumpCaseDetails = (id) => {
		uni.navigateTo({
			url: `/pages/case/details/index?id=${id}`
		})
	}
	const handleShare = async () => {
		if (!userStore.userId) {
			const res = await userStore.wxLogin()
			if(res.nickname) {
				uni.showToast({
					title:'登录成功',
					icon:'success'
				})
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1000)
				
				
			} else {
				uni.reLaunch({
					url:'/pages/login/index'
				})
			}
		} 
	}
	// 回到顶部
	const scrollTop = ref(0)
	onPageScroll((e)=>{
		scrollTop.value = e.scrollTop
	})
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}

	// 案例列表
	.case-list {
		margin: 0 32rpx;

		.case {
			margin: 32rpx 0;
			padding: 32rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.cover {
				$width: 200rpx;
				width: $width;
				height: $width;
				border-radius: 20rpx;
				margin-right: 20rpx;
				flex: 1 0 auto;
			}

			.info {
				width: 100%;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.property-name {
					width: 100%;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}

				.description {
					width: 100%;
					font-size: 24rpx;
					color: #666666;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.item {
						&:not(:first-child) {
							margin-left: 10rpx;
							padding-left: 10rpx;
							border-left: 2rpx solid #EEEEEE;
						}
					}

					:deep(.share) {
						margin: 0 0 0 auto;
					}
				}
			}
		}
	}
</style>